<!--
@license
Copyright (c) 2016 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->


<dom-module id="shop-home">

    <template>

    <style include="shop-button">
      .image-link {
        outline: none;
      }

      .image-link > shop-image::after {
        display: block;
        content: '';
        position: absolute;
        transition-property: opacity;
        transition-duration: 0s;
        transition-delay: 90ms;
        pointer-events: none;
        opacity: 0;
        top: 5px;
        left: 5px;
        right: 5px;
        bottom: 5px;
        outline: #2196F3 auto 5px;
        outline: -moz-mac-focusring auto 5px;
        outline: -webkit-focus-ring-color auto 5px;
      }

      .image-link:focus > shop-image::after {
        opacity: 1;
      }

      .item {
        display: block;
        text-decoration: none;
        text-align: center;
        margin-bottom: 40px;
      }

/*      .item:nth-of-type(3),
      .item:nth-of-type(4) {
        display: inline-block;
        width: 50%;
      }*/

      shop-image {
        position: relative;
        height: 320px;
        overflow: hidden;
        --shop-image-img: {
          position: absolute;
          top: 0;
          bottom: 0;
          left: -9999px;
          right: -9999px;
          max-width: none;
        };
      }

      h2 {
        font-size: 1.3em;
        font-weight: 500;
        margin: 32px 0;
      }

      .item:nth-of-type(3) > h2,
      .item:nth-of-type(4) > h2 {
        font-size: 1.1em;
      }

      @media (max-width: 767px) {
        shop-image {
            width: 100%;
          height: 240px;
        }

        h2 {
          margin: 24px 0;
        }

        .item:nth-of-type(3) > shop-button > a,
        .item:nth-of-type(4) > shop-button > a {
          padding: 8px 24px;
        }
      }
        .plugins{
            position: fixed;
            right: 0px;
            top: 0px;
            height: 100%;
            display: flex;
            align-items: flex-end;
            justify-content: center;
            flex-direction: column;
            z-index: 2;
            width: 1px;
        }
        .plugins[hidden]{
            display: none;
        }
        .plugins>div{
            background-color: rgba(0,0,0,0.5);
            padding: 5px;
        }
        .plugins .action{
            display: flex;
            justify-content: flex-end;
        }
        .plugins .action img{
            width: 20px;
            height: 20px;
        }
        .plugins .content div{
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            color: #fff;
            font-size: 12px;
            margin: 10px auto;
        }
        .plugins .content div img{
            width: 70px;
            height: 70px;
            object-fit: cover;
        }
    </style>
    <plugin-xhr id="xhr_plugin_list_by_category_point" url="[[app.apiHost]]/plugin.list.by.category.point" response="{{plugins}}" response-property="result"></plugin-xhr>
    <plugin-xhr id="xhr_open_page" url="[[app.apiHost]]/wx.app.call?name=openPage"></plugin-xhr>
    <plugin-content-view visible="{{visible}}" contents="{{layout.home_top}}" width="[[pageWidth]]"></plugin-content-view>
<!--    <dom-repeat items="[[categories]]">
      <template strip-whitespace>
        <div class="item">
          <a class="image-link" href$="{{rootPath}}list/[[item.name]]">
            <shop-image src="[[item.image]]" alt="[[item.title]]" placeholder-img="[[item.placeholder]]"></shop-image>
          </a>
          <h2>[[item.title]]</h2>
          <shop-button>
            <a aria-label$="[[item.title]] 立即选购" href$="{{rootPath}}list/[[item.name]]">立即选购</a>
          </shop-button>
        </div>
      </template>
    </dom-repeat>-->
    <plugin-content-view visible="{{visible}}" contents="{{layout.home_bottom}}" width="[[pageWidth]]"></plugin-content-view>
    <div class="plugins" hidden="{{pluginsIsEmpty}}">
        <div>
            <div class="action">
            <img hidden="[[!hiddenPlugins]]" on-click="_showPlugins" src="" />
            <img hidden="[[hiddenPlugins]]" on-click="_hidePlugins" src=""/>
            </div>
            <div class="content" hidden="[[hiddenPlugins]]">
                <template is="dom-repeat" items="[[plugins]]" as="plugin">
                    <div>
                        <img on-click="_openPlugin" src="[[plugin.config.icon]]"/>
                        <span>[[plugin.display_name]]</span>
                    </div>
                </template>
            </div>
        </div>
    </div>
<!--        <button on-click="_share">分享</button>-->
    </template>

    <script>
        class ShopHome extends PluginElement {

            static get is() {
                return 'shop-home';
            }

            static get properties() {
                return {
                    categories: {
                        type: Array
                    },

                    visible: {
                        type: Boolean,
                        observer: '_visibleChanged'
                    },
                    pageWidth:Number,
                    hiddenPlugins:{
                        type:Boolean,
                        value:false
                    },
                    pluginsIsEmpty:{
                        type:Boolean,
                        value:true
                    }
                }
            }

            _visibleChanged(visible) {
                if (visible) {
                    let dom = this;
                    this.$.xhr_plugin_list_by_category_point.param("plugin_category","sale").param("plugin_point","%shop-home-float%").param("app_id",app.appId).callback(function(rs){
                        dom.pluginsIsEmpty = rs.detail.result.length==0;
                        let hps = dom._cache("hiddenPlugins."+dom.app.account.result.id);
                        dom.hiddenPlugins = hps=="true";
                    }).get();
                    this.dispatchEvent(new CustomEvent('change-section', {
                        bubbles: true,
                        composed: true,
                        detail: {
                            title: '主页'
                        }
                    }));
                    
                }
            }
            ready(){
                super.ready();
                this.pageWidth = document.body.clientWidth;
                let dom = this;
                app.addEventListener("reload",function(e){
                    if(app.page=="home"){
                        dom._visibleChanged(true);
                    }
                });
            }
            _openPlugin(e){
                this.$.xhr_open_page.setBody({page:app.httpHost+"/"+e.model.plugin.id+".pl/"+e.model.plugin.config.point["shop-home-float"]+"?app_id="+app.appId}).post();
            }
            _customModelClick(e){
                if(e.detail.type=="product"){
                    let item = app.$.categoryData.getItem(e.detail.id);
                    app.route = {path:this.rootPath+"detail/"+item.category+"/"+item.name,prefix:""};
                }else if(e.detail.type=="blog"){
                    app.route = {path:this.rootPath+"blog/"+item.id,prefix:""};
                }else if(e.detail.type=="plugin"){
                    app.route = {path:this.rootPath+"plugin"+e.detail.link,prefix:""};
//                    this.$.xhr_open_page.setBody({page:app.httpHost+e.detail.link+"?app_id="+app.appId}).post();
                }
                
            }
            _showPlugins(e){
                this.hiddenPlugins = false;
                this._cache("hiddenPlugins."+this.app.account.result.id,"false")
            }
            _hidePlugins(e){
                this.hiddenPlugins = true;
                this._cache("hiddenPlugins."+this.app.account.result.id,"true")
            }
            _share(e){
                wx.miniProgram.redirectTo({
                    url: "/pages/share/share?scene="+encodeURIComponent(JSON.stringify({message:"<div style=\"text-align:center\"><img style=\"width:100%\" src=\"http://img4.imgtn.bdimg.com/it/u=364020411,3178215637&fm=26&gp=0.jpg\"/></div>",title:"请求帮忙",path:"/pages/index/index",imageUrl:"http://img-ads.csdn.net/2018/201811231403057859.jpg",successReirect:"https://dev.b2wx.com/zhuanpan.pl/?app_id="+app.appId,minAnswer:10,uid:app.account.result.id,sid:"test22"+app.appId,url:"https://dev.b2wx.com/zhuanpan.pl/?app_id="+app.appId}))
                });
            }
        }

        customElements.define(ShopHome.is, ShopHome);

    </script>

</dom-module>
